<template>
  <div class="preject-admin">
    <BreadcrumbNav title="项目管理"></BreadcrumbNav>
    <el-card class="card">
      <!-- 项目添加区域 -->
      <el-button type="primary" @click="handleAddProject">添加项目</el-button>
      <!-- 项目展示区域 -->
      <div class="project-list">
        <ProjectBox v-for="project in projectList" :key="project.id" :projectInfo="project" @update="handleUpdate"></ProjectBox>
      </div>
    </el-card>

    <!-- 弹框 -->
    <Dialog title="添加项目" :dialogVisible="dialogVisible" @close="handleClose" @update="handleUpdate"></Dialog>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useStore } from "vuex"
import BreadcrumbNav from "../../components/breadcrumb-nav"
import Dialog from "../../components/dialog"
import ProjectBox from "./cpns/ProjectBox.vue"
import useUpdateData from "./hooks/useUpdateData"
const store = useStore()
const projectList = ref([])
// 控制弹框
const dialogVisible = ref(false)
// 初始化、更新数据
useUpdateData(store).then(res => {
  projectList.value = res
})
// 添加项目按钮
const handleAddProject = () => {
  dialogVisible.value = true
}
// 添加|更新成功
const handleUpdate = () => {
  useUpdateData(store).then(res => {
    projectList.value = res
  })
}
// 弹框关闭
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.project-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
